
<template>
	<div id="Test_01">
		<h5>自定义指令:</h5>
		<div v-color="kcolor" class="kkk">
			page/text_01 {{test_01}}
    </div>
    <h5>插槽：</h5>
    <comTest01 number="6sss66" :test-text="numberTest" >
    	<p slot="justp">this is a slot</p>
    </comTest01>
    <h5>动画：</h5>
		<transition name="fade" mode="out-in">
			<div v-if="show0" class="show_anima" key="u">啊快速减肥的空间按时打卡积分</div>
			<div v-else class="show_anima" key="y">yyy</div>
			<!-- <p :is="curCom" ></p> -->
		</transition>
		<button @click="handleShow">show</button>
		<a href="http://www.baidu.com" @click="aClick">{{url}}baidu{{url}}</a>

    <h5>el三级联动：</h5>
		<el-cascader
		  :options="options"
		  placeholder="请选择"
		  separator=" "
		  @active-item-change="cascaderClick"
		  v-model="sel_option"
    ></el-cascader>
		<ul>
			<li v-for="(d,i) in d_list" :key="'d_'+i" @click="showDialog(i)">=========={{d}}========</li>
		</ul>
		<el-dialog title="提示"
  		:visible.sync="dialog"
  		width="30%"
  		>
			<div>{{d_content}}</div>
		</el-dialog>
		<input type="text" readonly unselectable="on" style="margin:15px;background-color:blue;"/>
	</div>
</template>

<script type="text/javascript">
  import Vue from 'vue'
  import comTest01 from "@/components/comTest01"
  import comA from '@/components/comA'
  import comB from '@/components/comB'
  import Vuex from 'vuex'

	export default {
		name:"TestFirst",
		data(){
			return {
				test_01:"test_01",
				numberTest:0,
				show0:!0,
				curCom:"com-a",
				kcolor:"#333",
				url:"----------",
				options:[{value:"1",label:"label1",children:[{value:"12",label:"label12",children:[{value:"13",label:"label13",}]},{value:"2",label:"label2",children:[{value:"3",label:"label3",}]}]},{value:"21",label:"label21",children:[{value:"22",label:"label22",children:[{value:"23",label:"label3",}]}]}],

			  sel_option:["1","12"],
				sel_str:"",
				dialog:true,
				d_list:[1,2,3,4,5,6,7],
				d_content:'',
			}
		},
		components:{comTest01,comA,comB},
		methods:{
			showDialog(i){
				this.dialog=true;
				this.d_content=this.d_list[i];
			},
		 	keyDown:function(e){
		 		//a键
	  		console.log(e)
	  	},
	  	handleShow:function(){
	  		this.show0=!this.show0;
	  		this.curCom=this.curCom=="com-a"?"com-b":"com-a";
	  		// console.log(this.curCom)
	  	},
	  	aClick:function(){
				event.preventDefault();
				console.log("click a");
				return false;
			},
			cascaderClick:function(e){
				console.log(e,this.sel_option);
			},
		},
		directives:{
	  		color:function(el,binding){
	  			console.log(el.class,binding);
	  			el.style.color="yellow";
	  		}
	  },
		mounted:function(){
			console.log("888",Vuex);
		}

	}
</script>


<style type="text/css" scoped>
@font-face {
  font-family: 'Tensentype DouDouJ';
  src: url('/src/assets/font/LiangPeiShengXiaoCuanFan.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.show_anima{
	background-color:#ccc;
	height:100px;
	font-family: 'Tensentype DouDouJ';
}
.fade-enter-active,.fade-leave-active{
	transition:all 1s ease-out;
}
.fade-enter,.fade-leave-to{
	opacity:0;
	height:0;
}


.show_p{
	width:100%;
	height:60px;
	background-color:blue;
	position:relative;
	color:#fff;
}


div{
	font-family: 'Tensentype DouDouJ';
}
</style>